{include file='public/header'}

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		{include file='public/nav'}
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		{include file='public/sidebar'}
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h3 class="page-title">账户管理</h3>
					<div class="row">
						<div class="col-md-12">
							<!-- TABLE HOVER -->
							<div class="panel manager_user">
								<div class="panel-head">
									<h3 class="panel-title">用户管理</h3>
									<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editModal">
										<i class="fa fa-plus"></i>
										添加用户
									</button>
								</div>
								<div class="panel-body">
									<table class="table table-hover">
										<thead>
											<tr>
												<th>ID</th>
												<th>用户名</th>
												<th>邮箱</th>
												<th>状态</th>
												<th>最近登录</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											{foreach $list as $vo} 
											<tr>
												<td>{$vo.id}</td>
												<td>{$vo.username}</td>
												<td>{$vo.email}</td>
												<td>{$vo.status}</td>
												<td>{$vo.lastTime}</td>
												<td>
													<button type="button" class="btn btn-primary btn-xs">
														<i class="fa fa-eye"></i>
														<span>查看</span>
													</button>
													<button type="button" class="btn btn-primary btn-xs">
														<i class="fa fa-pencil"></i>
														<span>编辑</span>
													</button>
													<button type="button" class="btn btn-primary btn-xs">
														<i class="fa fa-exclamation-circle"></i>
														<span>停用</span>
													</button>
													<button type="button" class="btn btn-primary btn-xs">
														<i class="fa fa-trash"></i>
														<span>删除</span>
													</button>
												</td>
											</tr>
											{/foreach}
										</tbody>
									</table>
								</div>
							</div>
							<!-- END TABLE HOVER -->
						</div>
					</div>
				</div>	
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
	</div>
	<!-- MODAL -->
	<!-- Modal -->
	<form id="editForm">
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="editModalLabel">新建用户</h4>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<label>用户名</label>
							<input type="text" name="username" class="form-control" placeholder="由5-10位英文字母、数字或者下划线组成">
						</div>
						<div class="form-group">
							<label>使用者</label>
							<input type="text" name="name" class="form-control" placeholder="请输入使用者姓名(2-10个字符)">
						</div>
						<div class="form-group">
							<label>电子邮箱</label>
							<input type="text" name="email" class="form-control" placeholder="请输入使用者电子邮箱地址">
						</div>
						<div class="form-group">
							<label>手机号码</label>
							<input type="text" name="phone" class="form-control" placeholder="请输入使用者11位手机号码">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
	</form>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	{include file='public/script'}

	<script src="__STATIC__/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
	<script src="__STATIC__/vendor/jquery-validation/dist/localization/messages_zh.min.js"></script>

	<script>
		$("#editForm").validate({
			rules:{
		        username:{
		            required: true,
		            checkUsername: true
		        },
		        name:{
		        	required: true,
		        	rangelength: [2,10],
		        },
		        email:{
		        	required: true,
		        	checkEmail: true
		        },
		        phone:{
		        	required: true,
		        	checkPhone: true
		        }
		    },
		    messages:{
		    },
		    debug:true,
		    //是否在获取焦点时验证
			//onfocusout:false,
			//是否在敲击键盘时验证
			//onkeyup:false,
			//提交表单后，（第一个）未通过验证的表单获得焦点
			focusInvalid:true,
			submitHandler:function(form){
				utils.ajax({
					url: '/index.php/admin/manager/save',
					data: $('#editForm').serialize(),
					success: function(){
						debugger;
						$('#editModal').modal('hide');
					}
				})
			}
		});
		
		// 验证用户名
		$.validator.addMethod("checkUsername",function(value,element,params){
			var checkName = /^\w{5,10}$/g;
			return this.optional(element)||(checkName.test(value));
		},"*只允许5-10位英文字母、数字或者下划线！");
		
		// 验证邮箱
		$.validator.addMethod("checkEmail",function(value,element,params){
			var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
			return this.optional(element)||(checkEmail.test(value));
		},"*请输入正确的邮箱地址！");

		// 验证手机号
		$.validator.addMethod("checkPhone",function(value,element,params){
			var checkEmail = /^1[3,5,7,8]\d{9}$/;
			return this.optional(element)||(checkEmail.test(value));
		},"*请输入正确的手机号码！");
	</script>
</body>

</html>
